Quick tutorial to Gradio

Gradio overview

Gradio can be used to create a web interface to seamlessly bridge the gap between machine learning models and end-user interaction. It enables developers to effortlessly transform their algorithms into accessible, interactive applications. With Gradio, you can quickly design web interfaces that allow users to input data in various forms—such as text, images, or audio—and instantly view the output generated by your model. For more information, please visit Gradio.

In this project, your LLM-based resume advisor application will need a web interface to interact with. So, let's get familiar with Gradio and create a simple Gradio application first.

Create a Gradio demo

Create a .py file

First, you need to create a .py file in cloud IDE on your left. Under the EXPLORER tab, open the PROJECT directory, right click and choose New file.

Alt text

Then, you can name your file gradio_demo.py.

Alt text

A demo of sum calculator

You will create an application that can calculate the sum of your input numbers.

In the gradio_demo.py, you can enter the following code.

The gr.Number() element from gradio is being used to create a numeric field for the user to enter numbers as input or display numeric output.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  1. import gradio as gr
  2. def add_numbers(Num1, Num2):
  3. return Num1 + Num2
  4. # Define the interface
  5. demo = gr.Interface(
  6. fn=add_numbers,
  7. inputs=[gr.Number(), gr.Number()], # Create two numerical input fields where users can enter numbers
  8. outputs=gr.Number() # Create numerical output fields
  9. )
  10. # Launch the interface
  11. demo.launch(server_name="127.0.0.1", server_port= 7860)

Launch the application

Return to the terminal and verify that the virtual environment my_env label appears at the start of the line, which means that you are in the my_env environment that you just created. Next, execute the following command to run the Python script.

  1. 1
  1. python3.11 gradio_demo.py

After it runs successfully, you will see a message similar to following in the terminal:

Alt text

Since the web application is hosted locally on port 7860, click on the following button to view the application we've developed.

(Note: if this “Web Application” button does not work, follow the following picture instructions to launch the app.”)
Alt text

Alt text

Let's take a look at the web application. It shows an example of sum of 3 and 4. You're encouraged to experiment with the web app's inputs and outputs!

Alt text

If you want to stop the script, you can press Ctrl+C in the terminal and close the appliction window.

Exercise

Can you create a Gradio application that can combine two input sentences together? Take your time to complete this exercise.

Let's take a look of the answer.
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  1. import gradio as gr
  2. def combine(a, b):
  3. return a + " " + b
  4. demo = gr.Interface(
  5. fn=combine,
  6. inputs = [
  7. gr.Textbox(label="Input 1"),
  8. gr.Textbox(label="Input 2")
  9. ],
  10. outputs = gr.Textbox(value="", label="Output")
  11. )
  12. demo.launch(server_name="127.0.0.1", server_port= 7860)

You just had a first taste of the Gradio interface; it's easy right? If you want to learn more about customization in Gradio, you can take this guided project Bring your Machine Learning model to life with Gradio. You can find more relevant courses and projects on cognitiveclass.ai

For the rest of this project, you will use Gradio as an interface for the created application.